<template>
    <div class="like">
        <!-- 我的歌单 -->
        <div class="top">
            <img :src="songSheetList[0]?.al?.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'"
                alt="">
            <div class="history-play-list-title">
                <div>{{ userSongSheetName }}</div>
                <div class="user">
                    <img :src="getUser()?.avatarImgIdStr" alt="" srcset="">
                    <div>{{ getUser()?.userName }}</div>
                </div>
                <div class="tooltip">
                    <button @click="playAllSong">播放全部 {{ songSheetList.length }}</button>
                    <el-tooltip placement="bottom-end" trigger="click" :hide-after="0" offset="2" :show-arrow="false"
                        :popper-style="{ padding: '2px 0' }">
                        <template #content>
                            <div class="toopTip">
                                <svg t="1705056683735" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5461" width="20" height="20">
                                    <path
                                        d="M742.4 390.826667H281.6a115.2 115.2 0 0 0-115.2 115.2V853.333333a115.626667 115.626667 0 0 0 115.2 115.2h460.8a115.626667 115.626667 0 0 0 115.2-115.2v-345.6a115.2 115.2 0 0 0-115.2-116.906666zM780.8 853.333333a38.826667 38.826667 0 0 1-38.4 38.4H281.6a38.826667 38.826667 0 0 1-38.4-38.4v-345.6a38.4 38.4 0 0 1 38.4-38.4h460.8a38.4 38.4 0 0 1 38.4 38.4z"
                                        fill="#fff" p-id="5462"></path>
                                    <path
                                        d="M512 57.173333a230.826667 230.826667 0 0 0-230.4 230.4V469.333333h76.8V287.573333a153.6 153.6 0 0 1 307.2 0V469.333333h76.8V287.573333a230.826667 230.826667 0 0 0-230.4-230.4z m-74.24 832.853334a236.8 236.8 0 0 0 148.48 0z"
                                        fill="#fff" p-id="5463"></path>
                                    <path
                                        d="M473.6 585.813333m38.4 0l0 0q38.4 0 38.4 38.4l0 153.6q0 38.4-38.4 38.4l0 0q-38.4 0-38.4-38.4l0-153.6q0-38.4 38.4-38.4Z"
                                        fill="#fff" p-id="5464"></path>
                                    <path d="M512 617.813333m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"
                                        fill="#fff" p-id="5465"></path>
                                </svg>
                                <span>设置为隐私</span>
                            </div>
                            <div class="toopTip" @click="deleteSongSheetById(userSongSheetId)">
                                <svg t="1705056765758" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6475" width="20" height="20">
                                    <path
                                        d="M383.2 176h256c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16h-256c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16zM392 736h48c8.8 0 16-7.2 16-16V464c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v256c0 9.6 7.2 16 16 16zM584 736h48c8.8 0 16-7.2 16-16V464c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v256c0 9.6 7.2 16 16 16z"
                                        fill="#ffffff" p-id="6476"></path>
                                    <path
                                        d="M912 256.8H112c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h80V864c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64V336.8h80c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM752 848H272V336.8h480V848z"
                                        fill="#ffffff" p-id="6477"></path>
                                </svg>
                                <span>删除歌单</span>
                            </div>
                        </template>
                        <span class="span">···</span>
                    </el-tooltip>
                </div>

            </div>
        </div>
        <!-- 歌曲列表 -->
        <MusicList :data="songSheetList" />
        <div style="position: absolute;top: 50vh;width: 100%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs, watch } from 'vue';
// import { getMusicDetail } from "../../../api/music/index";
import useCounterStore from '@/stores/counter';
import MusicList from '@/components/musicList.vue';
import { getPlayListTrack, deleteSongSheet } from '@/api/songSheet/index'
import { getUser } from '@/utils/auth'

const { userSongSheetName, playList, songInfo, userSongSheetId, userSongSheetList } = toRefs(useCounterStore());
const songSheetList = ref([] as any)// 歌单列表
const loading = ref<boolean>(true)// 加载状态

onMounted(async () => {
    getUserSongSheet()
})

//播放当前全部历史歌曲
const playAllSong = () => {
    playList.value = songSheetList.value
    songInfo.value = songSheetList.value[0]
}

// getUserSongSheet函数，用于获取用户歌曲表
async function getUserSongSheet() {
    //设置加载状态为true
    loading.value = true
    //获取播放列表的轨迹
    const { data } = await getPlayListTrack({ id: userSongSheetId.value })
    //如果获取的code为200
    if (data.code === 200) {
        //将获取的播放列表歌曲赋值给songSheetList.value
        songSheetList.value = data.songs
        //设置加载状态为false
        loading.value = false

    }
}

/**
 * deleteSongSheetById函数，用于删除指定id的歌曲表
 * @param id number 歌曲表id
 * @returns 无
 * @功能 ：根据id删除歌曲表
 */
async function deleteSongSheetById(id: number) {
    // 调用deleteSongSheet函数，传入id参数，获取返回值
    const { data } = await deleteSongSheet({ id })
    // 如果返回值code为200，表示删除成功
    if (data.code === 200) {
        // 找到要删除的id在userSongSheetList中的索引
        const index = userSongSheetList.value.findIndex((item: { id: number }) => item.id === id)
        // 从userSongSheetList中删除指定id的歌曲表
        userSongSheetList.value.splice(index, 1)
        // 将userSongSheetId设置为userSongSheetList中的第一个id
        userSongSheetId.value = userSongSheetList.value[0].id
    }
}

// 当userSongSheetId发生变化时，调用getUserSongSheet函数
watch(userSongSheetId, () => {
    getUserSongSheet()
})

</script>

<style lang="scss" scoped>
.like {
    width: 100%;
    height: 87%;
    color: aliceblue;
    overflow: auto;
    margin-top: 8%;
    position: relative;

    .top {
        display: flex;
        color: rgb(182, 198, 212);
        position: relative;
        padding: 0 3vw;
        font-size: 2vw;
        padding-bottom: 2vw;

        >img {
            width: 20%;
            height: 24vh;
            border-radius: 10px;
            margin-right: 2vw;

        }
    }
}

.history-play-list-title {
    position: relative;

    >div {
        font-size: 18px;
        font-weight: 700;
    }

    .tooltip {
        width: 60vw;
        height: 5vh;
        position: absolute;
        bottom: -0.6vh;
        display: flex;
        align-items: center;

        >button {
            border: 0;
            min-width: 10vw;
            border-radius: 4px;
            padding: 6px 26px;
            font-size: 10px;
            color: #000;
            font-weight: 700;
            cursor: pointer;
        }
    }

}

.user {
    margin-top: 10px;
    display: flex;
    align-items: center;

    img {
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50px;
    }

    >div {
        margin-left: 0.4vw;
        font-size: 10px;
        font-weight: 100;
    }
}

.span {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 100;
    color: rgb(182, 198, 212);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
}

.toopTip {
    width: 15vw;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 3vw;
    padding: 0 1vw;

    span {
        margin-left: 10px;
    }
}

.toopTip:hover {
    background: rgba(255, 255, 255, 0.2);
}

.span:hover {
    background: rgba(255, 255, 255, 0.2);
}

.like::-webkit-scrollbar {
    display: none;
}
</style>